<template>
    <view class="content">
        <view class="address">
            <view class="edit">
                <view class="bor-top u-flex u-row-between">
                    <view class="edit-title">联系人</view>
                    <input type="text" v-model="name" placeholder="请填写联系人姓名" placeholder-style="color:#9b9b9b">
                </view>
                <view class="bor-top u-flex u-row-between">
                    <view class="edit-title">联系方式</view>
                    <input type="number" v-model="tel" placeholder="请输入11位手机号码" placeholder-style="color:#9b9b9b">
                </view>
                <view class="bor-top u-flex u-row-between u-col-top" @click="show = true">
                    <view class="edit-title">收货地址</view>
                    <input type="text" v-model="region" placeholder="请选择省市区" placeholder-style="color:#9b9b9b" disabled>
                </view>
                <view class="bor-top u-flex u-row-between u-col-top">
                    <view class="edit-title"></view>
                    <input type="text" v-model="address" placeholder="详细楼层 / 门牌号" placeholder-style="color:#9b9b9b">
                </view>
                
                <view class="frame u-flex u-row-between bor-top">
                	<view class="frame-tit">设置默认地址</view>
                	<u-switch v-model="checked" size="40" active-color="#00754d" @change="change"></u-switch>
                </view>
                <image src="../../static/icon/line.png" class="line"></image>
            </view>
        </view>
        <view class="address-btn" @click="doSubmit">确认</view>
        
        <!-- 省市区 -->
        <u-select v-model="show" mode="mutil-column-auto" :list="list" value-name="region_id" label-name="name" child-name="sub" @confirm="confirm"></u-select>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				checked: true,
                name: '',
                tel: '',
                region: '', //省市区
                provinceVal: '',
                cityVal: '',
                areaVal: '',
                address: '', //详细地址
                
                item: '',
                is_default: '',
                show: false,
                list: [],
			}
		},
        onLoad(option) {
            if(option.from){
            	uni.setNavigationBarTitle({
            		title:'修改地址'
            	})
            	this.item = JSON.parse(decodeURIComponent(option.item));
            	this.name = this.item.name
            	this.tel = this.item.mobile
                this.region = this.item.province_txt + this.item.city_txt + this.item.district_txt
                this.provinceVal = this.item.province
                this.cityVal = this.item.city
                this.areaVal = this.item.district
                this.address = this.item.address
                this.is_default = this.item.is_default;
                
                console.log(this.item)
            }
            this.getRegion()
        },
		methods: {
            doSubmit(){
            	if(!this.name){
            		this.$toast('请输入联系人姓名')
            		return
            	}
            	if(!this.tel){
            		this.$toast('请输入联系人手机号')
            		return
            	}
            	if(!this.$checkPhone(this.tel)){
            		this.$toast('请输入正确的手机号')
            		return
            	}
                if (!this.provinceVal) {
                    this.$toast('请选择省市区');
                    return
                }
                if(!this.address){
                	this.$toast('请输入详细地址')
                	return
                }
            	this.$ajax('editAddress', {
                    userToken: this.$getSync('userToken'),
            		name: this.name,
            		mobile: this.tel,
                    province: this.provinceVal,
                    city: this.cityVal,
                    district: this.areaVal,
                    address: this.address,//地址
                    id: this.item.id ? this.item.id : '', //地址ID(新增传空)
                    is_default: this.is_default ? this.is_default : this.checked,//0-否 1-是
                    lat: '',//纬度
                    lng: '',//经度
            	}).then(ret => {
            		if (ret.status == 0) {
                        this.$toast('添加成功！');
            			setTimeout(() => {
                            this.$backT()
                        }, 300)
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            change(status) {
            	console.log(status);
                this.checked = status == true ? 1 : 0
                this.is_default = this.checked
            },
            
            // 选择省市区
            confirm(e) {
                console.log(e);
                this.region = e[0].label + e[1].label + e[2].label
                this.provinceVal = e[0].value
                this.cityVal = e[1].value
                this.areaVal = e[2].value
            },
            
            // 获取省市区
            getRegion(){
            	this.$ajax('region', {
            		
            	}).then(ret => {
            		if (ret.status == 0) {
            			this.list = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
		}
	}
</script>

<style>
    page {
    	background-color: #f5f5f5;
    }
</style>

<style lang="scss" scoped>
    // 小区弹窗
    .popup{
        padding: 24rpx;
    }
    .popup-item{
        padding: 20rpx 0;
        text-align: center;
    }
    .activeHome{
        font-weight: bold;
        color: #00a1e9;
    }
    .pop-btn{
        color: #fff;
        background-color: #00a1e9;
        padding: 20rpx;
        text-align: center;
        margin: 20rpx;
        border-radius: 50rpx;
    }
    
    
    .select {
        display: flex;
        align-items: center;
        height: 100upx;
    }
    .adr-box {
        width: 76vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .adr-box > view {
        width: 100%;
        font-size: 28upx;
    }
    .place {
        font-size: 28upx;
        color: #9b9b9b;
        margin-right: 10upx;
    }
    

	.frame {
		width: 100%;
		background-color: #fff;
		padding: 0 20rpx;
		border-bottom: 1rpx solid #e6e6e6;

		.content:last-child .frame {
			border-bottom: 0;
		}

		.frame-tit {
			min-width: 160rpx;
			font-size: 28rpx;
			color: #313131;
			line-height: 110rpx;
			text-align: left;
		}



		.frame-con {
			font-size: 30rpx;
			color: #0c0c0c;
			line-height: 110rpx;
		}

		input {
			flex: 1;
			height: 110rpx;
			font-size: 30rpx;

			.p1 {
				color: #b9b9b9;
			}
		}

		.i1::after {
			content: '';
			width: 632rpx;
			height: 1rpx;
			background-color: #e6e6e6;
			position: absolute;
			top: 0;
			right: -20rpx;
		}

		.z-right {
			width: 16rpx;
			height: 29rpx;
		}

	}

	.line {
		width: 746rpx;
		height: 2rpx;

	}

	.btn {
		width: 686rpx;
		height: 92rpx;
		font-size: 34rpx;
		color: #fff;
		line-height: 92rpx;
		text-align: center;
		border-radius: 46rpx;
		background: #b00b0e;
		margin: 150rpx auto 0;

	}
    
    
    .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
    }
    
    // 地址列表
    .address {
        width: 100%;
    
        .edit {
            width: 100%;
            background-color: #fff;
    
            .edit-title {
                width: 184rpx;
                font-size: 28rpx;
                color: #313131;
                line-height: 110rpx;
                padding-left: 20rpx;
            }
    
            input {
                flex: 1;
                width: 100%;
                height: 110rpx;
                font-size: 30rpx;
                color: #313131;
                padding-right: 20rpx;
            }
    
            .sex {
                width: 130rpx;
                font-size: 30rpx;
                color: #7b7b7b;
                line-height: 58rpx;
                text-align: center;
                border-radius: 10rpx;
                border: 1rpx solid #e6e6e6;
                position: relative;
                overflow: hidden;
    
                image {
                    display: none;
                    width: 31rpx;
                    height: 27rpx;
                    position: absolute;
                    top: 0;
                    right: 0;
                }
            }
    
            .active {
                color: #f99f24;
                border: 1rpx solid #f99f24;
    
                image {
                    display: block;
    
                }
            }
    
        }
    
        .bor-top {
            border-top: 1rpx solid #e6e6e6;
        }
    
        .icon {
            display: block;
            width: 25rpx;
            height: 32rpx;
        }
    
        .line {
            display: block;
            width: 750rpx;
            height: 3rpx;
        }
    }
    
    
    
    // 按钮
    .address-btn {
        width: 686rpx;
        font-size: 34rpx;
        color: #fff;
        line-height: 94rpx;
        text-align: center;
        border-radius: 94rpx;
        background: #00734c;
        margin: 50rpx auto;
    }
</style>
